esri loader + Arcgis api 4.x加载 arcgis server 地图服务

留言

默认是加载4.x的api在线连接。

1. template部分
1
2
3
<template>
  <div></div>
</template>
2. 导包部分 js和css自动导入最新版，所以不用再导入loadScript和loadCss
1
import { loadModules } from 'esri-loader'
3. export接口部分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
export default {
  name: 'web-map',
  mounted() {
    loadModules(['esri/map', 'esri/views/MapView', 'esri/layers/MapImageLayer', 'esri/geometry/Extent', 'esri/geometry/SpatialReference'], { css: true })
      .then(([ArcGISMap, MapView, MapImageLayer, Extent, SpatialReference]) => {

        const map = new ArcGISMap({
          // basemap: 'osm',
          logo: false
        })
        var dongURL = 'http://localhost:6080/arcgis/rest/services/shopping/payMon_zenzhag/MapServer'

        var donglayer = new MapImageLayer(dongURL)

        map.add(donglayer)
        this.view = new MapView({
          container: this.$el,
          map: map,
          // center: [-118, 34],
          zoom: 8
        })
      })
  },
  beforeDestroy() {
    if (this.view) {
      // destroy the map view
      this.view.container = null
    }
  }
}